<template>
  <div class="grade-edit">
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="学期" prop="semester">
        <el-select v-model="form.semester" placeholder="选择学期">
          <el-option
            v-for="item in semesterOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="班级" prop="class">
        <el-select
          v-model="form.class"
          placeholder="选择班级"
          @change="handleClassChange"
        >
          <el-option
            v-for="item in classOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课程" prop="course">
        <el-select v-model="form.course" placeholder="选择课程">
          <el-option
            v-for="item in courseOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <div class="student-grades">
        <h4>学生成绩列表</h4>
        <el-table :data="studentList" border>
          <el-table-column prop="studentId" label="学号" width="120" />
          <el-table-column prop="name" label="姓名" width="100" />
          <el-table-column label="成绩" width="150">
            <template #default="scope">
              <el-input-number
                v-model="scope.row.score"
                :min="0"
                :max="100"
                :precision="1"
                :step="0.5"
                @change="handleScoreChange(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === '已保存' ? 'success' : 'warning'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="180" />
        </el-table>
      </div>

      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">保存全部</el-button>
        <el-button @click="resetForm(formRef)">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 确认对话框 -->
    <el-dialog
      v-model="confirmDialogVisible"
      title="确认修改"
      width="400px"
    >
      <p>确定要修改这些学生的成绩吗？此操作将记录在修改历史中。</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref()
const confirmDialogVisible = ref(false)

const form = reactive({
  semester: '',
  class: '',
  course: ''
})

const rules = {
  semester: [
    { required: true, message: '请选择学期', trigger: 'change' }
  ],
  class: [
    { required: true, message: '请选择班级', trigger: 'change' }
  ],
  course: [
    { required: true, message: '请选择课程', trigger: 'change' }
  ]
}

const semesterOptions = [
  { label: '2023-2024-1', value: '2023-2024-1' },
  { label: '2023-2024-2', value: '2023-2024-2' }
]

const classOptions = [
  { label: '计科2101', value: '计科2101' },
  { label: '计科2102', value: '计科2102' }
]

const courseOptions = [
  { label: '高等数学', value: '高等数学' },
  { label: '大学英语', value: '大学英语' },
  { label: '程序设计', value: '程序设计' }
]

const studentList = ref([
  {
    studentId: '2021001',
    name: '张三',
    score: 85,
    status: '已保存',
    updateTime: '2024-03-15 14:30'
  },
  {
    studentId: '2021002',
    name: '李四',
    score: 55,
    status: '未保存',
    updateTime: '2024-03-15 14:30'
  }
])

const handleClassChange = () => {
  // 加载班级学生列表
}

const handleScoreChange = (row) => {
  row.status = '未保存'
}

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      confirmDialogVisible.value = true
    }
  })
}

const confirmSubmit = () => {
  confirmDialogVisible.value = false
  // 提交成绩修改
  ElMessage.success('成绩保存成功')
  studentList.value.forEach(student => {
    student.status = '已保存'
    student.updateTime = new Date().toLocaleString()
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  studentList.value = []
}
</script>

<style scoped>
.grade-edit {
  max-width: 900px;
  margin: 20px auto;
}
.student-grades {
  margin: 20px 0;
}
.student-grades h4 {
  margin-bottom: 15px;
  color: #606266;
}
</style>
